<template>
  <div>
    <span v-if="dealerDis === false">
      <!--    <el-input readonly placeholder="经销商选择" v-model="dealerCodeInName" >-->
      <el-input :value="dealerCodeInName" readonly placeholder="经销商选择" >
        <i slot="suffix" class="el-input__icon el-icon-search" @click="openDia" />
        <i slot="suffix" class="el-input__icon el-icon-error" @click="changeCD" />
    </el-input></span>
    <span v-else>
      <el-input v-model="dealerCodeInName" placeholder="经销商选择" disabled/>
    </span>
    <!-- 弹框 -->
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="经销商选择" width="70%">
      <!-- 查询条件 -->
      <el-form
        ref="searchDealerForm"
        :inline="true"
        :model="search"
        size="mini"
        class="searchform"
        label-width="100px"
        label-position="right"
      >
        <el-form-item prop="dealerCode" label="经销商代码">
          <el-input v-model="search.dealerCode" placeholder="经销商代码" class="search-input" clearable/>
        </el-form-item>
        <el-form-item prop="dealerName" label="经销商名称">
          <el-input v-model="search.dealerName" placeholder="经销商名称" class="search-input" clearable/>
        </el-form-item>
        <br>
        <div style="text-align:center">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchRole">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 用户列表 -->
      <div class="tableHead">
        <div class="tabletitle">经销商</div>
      </div>
      <el-table
        v-loading="load"
        ref="roleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        border
        @current-change="select"
      >
        <el-table-column label="序号" type="index" min-width="50"/>
        <el-table-column prop="DEALER_CODE" label="经销商代码" min-width="100"/>
        <el-table-column prop="DEALER_NAME" label="经销商名称" min-width="100"/>
        <el-table-column prop="DEALER_SHORTNAME" label="经销商简称" min-width="100"/>
        <!-- <el-table-column prop="IS_VALID" label="是否有效" min-width="100" type="1004" :formatter="filterCode"></el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <div style="text-align:right">
        <Pagination
          :data="page"
          @change-size="handleSizeChange"
          @change-page="handleCurrentChange"
        />
      </div>

      <div style="text-align:center">
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="req">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getChildDealerSelectList } from '@/api/admin/org/gms/employeeInfo'
import Pagination from '@/components/Pagination'

export default {
  name: 'ChildDealerSelect',
  components: {
    Pagination
  },
  props: {
    dealerCodeInName: String,
    dealerDis: Boolean
  },
  data() {
    return {
      list: [],
      load: false,
      page: {},
      multipleSelection: [],
      search: {
        limit: 10,
        pageNum: 1,
        dealerCode: '',
        dealerName: ''
        // isDealer:false
      },
      dialogVisible: false
    }
  },
  mounted() {},
  methods: {
    // 查询经销商选择列表
    openDia() {
      this.dialogVisible = true
      this.searchRole()
    },
    // 删除经销商(采购单位)
    changeCD() {
      this.dealerCodeInName = ''
      this.$emit('changeCD', '')
    },
    searchRole() {
      this.load = true
      getChildDealerSelectList(this.search)
        .then(res => {
          this.list = res.rows
          this.page = res
          this.load = false
        })
        .catch(err => {
          this.load = false
        })
    },
    // 经销商列表选择
    select(val) {
      if (val === null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    // 经销商选择分页
    handleSizeChange(size) {
      this.search.limit = size
      this.searchRole()
    },
    handleCurrentChange(page) {
      this.search.pageNum = page
      this.searchRole()
    },
    // 确定
    req() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择数据!'
        })
      } else {
        this.dealerCodeInName = this.multipleSelection.DEALER_NAME
        this.$emit('getChildDealerInfo', this.multipleSelection)
        this.dialogVisible = false
      }
    },
    resetForm() {
      this.search.dealerCode = ''
      this.search.dealerName = ''
      this.searchRole()
    }
  }
}
</script>

<style scoped>

</style>
